<!--
 * @Descripttion: 应用管理-访问权限
 * @Author: 何伟伦 weilun@ssc-hn.com
 * @Date: 2024-03-21
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-03-28
-->
<template>
  <div class="edit">
    <a-modal v-model:visible="visible" title="访问权限配置" @ok="form.onOk">
      <a-form :model="validateInfos" ref="formRef" labelAlign="left">
        <a-form-item label="访问权限" v-bind="validateInfos.authorities">
          <a-select v-model:value="form.state.authorities" mode="multiple" style="width: 100%" placeholder="权选择访问权限" :options="authOptions" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import type { SelectProps } from 'ant-design-vue'
  import { Form, message } from 'ant-design-vue'
  import { computed, reactive, ref, watch } from 'vue'

  import { requestGetCompanyIdentityList } from '/@/api/business/company/config'
  import { requestUpdateAccessPermissions } from '/@/api/system/app/config'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { getCompanyInfo } from '/@/storage'

  const { companyId } = getCompanyInfo()

  const props = defineProps({
    visible: { type: Boolean, default: false },
    clientId: { type: String, default: null },
    authorities: { type: String, default: null },
  })
  /** 角色-选项 */
  const authOptions = ref<SelectProps['options']>([])

  /**
   * 初始化角色
   */
  const initLists = async () => {
    const { responseData } = await requestGetCompanyIdentityList({ companyId })
    authOptions.value = responseData.map((item) => ({
      label: item.identityName,
      value: item.id,
    }))
  }

  const emits = defineEmits(['update:visible', 'success'])

  const visible = computed({
    get: () => props.visible,
    set: (val) => emits('update:visible', val),
  })

  watch(
    () => visible.value,
    (newVal, oldVal) => {
      if (newVal && !oldVal) {
        initData()
        initLists()
      }
    },
  )

  /**
   * 初始化数据
   */
  const initData = () => {
    resetFields()
    form.state.clientId = props.clientId
    form.state.authorities = !props.authorities || props.authorities === '' ? [] : props.authorities.split(',')
  }

  /** 表单配置 */
  const form: {
    state: {
      clientId: string
      authorities: string[]
    }
    rule: any
    onOk: Function
  } = reactive({
    state: {
      clientId: '',
      authorities: [],
    },
    rule: {
      authorities: [{ required: true, message: '请选择访问权限' }],
    },
    onOk: () => {
      validate()
        .then(async () => {
          const { clientId, authorities } = form.state
          const { responseCode } = await requestUpdateAccessPermissions({
            clientId,
            authorities: authorities.join(','),
          })
          if (responseCode === HttpCodeEnum.SUCCESS) {
            message.success('修改成功')
            visible.value = false
            emits('success')
          }
        })
        .catch(() => {})
    },
  })
  /** 表单hook */
  const { validate, validateInfos, resetFields } = Form.useForm(form.state, form.rule)
</script>

<style lang="less" scoped></style>
